<template>
	<view class="operate">
		<block v-if="cancelAble == true || flag">
			<view class="btn one" @click.stop="onCancel()">取消订单</view>
		</block>
		<block v-if="paymentAble == true || flag">
			<view class="btn three" @click.stop="onPay()">去支付</view>
		</block>
		<block v-if="refundAble == true">
			<view class="btn two" @click.stop="onRefund()">申请退款</view>
		</block>
		<block v-if="returnAble == true || flag">
			<view class="btn two" @click.stop="onReturn()">申请退货</view>
		</block>
		<block v-if="receiptAble == true || flag">
			<view class="btn two" @click.stop="onReceipt()">确认收货</view>
		</block>
	</view>
</template>

<script>
	import OrderApi from '@/api/order/order.js';
	//订单操作组件
	//@group 业务组件
	export default {
		//
		name: 'orderOperate',
		//
		data() {
			return {
				flag: false
			};
		},
		//
		props: {
			//订单Id
			orderId: {
				type: String,
				default: '',
				required: true
			},
			//是否可以取消
			cancelAble: {
				type: Boolean,
				default: false,
				required: true
			},
			//是否可以支付
			paymentAble: {
				type: Boolean,
				default: false,
				required: true
			},
			//是否可以退款
			refundAble: {
				type: Boolean,
				default: false,
				required: true
			},
			//是否可以退货
			returnAble: {
				type: Boolean,
				default: false,
				required: true
			},
			//是否确认收货
			receiptAble: {
				type: Boolean,
				default: false,
				required: true
			}
		},
		//
		methods: {
			//通用操作方法
			onAction(actionText, actionApi, successMsg, eventType,params) {
				const app = this;
				app.$app.confirm(`确认${actionText}该订单吗？`, () => {
					actionApi(params).then(result => {
						app.$app.toast(result.msg);
						//点击取消，退款，退货，收货后回调
						//向父组件传递操作完成后返回对象（{	success: result.success,msg: successMsg}）
						this.$emit(`${eventType}:result`, {
							success: result.success,
							msg: successMsg
						});
					});
				});
			},
			//取消订单
			onCancel() {
				this.onAction('取消', OrderApi.cancel, '取消', 'onCancel',{
					orderId:this.orderId
				});
			},
			//申请退款
			onRefund() {
				this.onAction('退款', OrderApi.refund, '退款', 'onRefund',{
					orderId:this.orderId,
					reason:"用户主动退款"
				});
			},
			//申请退货
			onReturn() {
				this.onAction('退货', OrderApi.return, '退货', 'onReturn',{
					orderId:this.orderId,
					reason:"用户主动退货"
				});
			},
			//确认收货
			onReceipt() {
				this.onAction('收货', OrderApi.receipt, '收货', 'onReceipt',{
					orderId:this.orderId
				});
			},
			//支付订单
			onPay() {
				//点击支付后回调
				//@arg 向父组件传递订单Id，（id）
				this.$emit('onPay:result', {
					id: this.orderId
				});
			}
		}
	};
</script>

<style lang="scss" scoped>
	.operate {
		display: flex;
		
		.btn {
			display: inline-block;
			padding: 6rpx 24rpx;
			margin: 0rpx 6rpx;
			border-radius: 76rpx;
			height: 52rpx;

			&.one {
				border: 1px solid #CCCCCC;
			}

			&.two {
				color: rgba(247, 68, 29, 1);
				border: 1px solid rgba(247, 68, 29, 1);
			}

			&.three {
				color: $uni-text-color-inverse;
				border: 0px solid #CCCCCC;
				background: linear-gradient(118.17deg, #FEA370 0%, #FE2406 95.01%);
			}
		}
	}
</style>